<template>
	<div class="share-main">
		<div class="share-content">
			<div class="shareBody" :id="id">
				<div class="img-c">
					<img
						class="b-img"
						crossOrigin="anonymous"
						:src="bgImg"
						style="object-fit: cover"
					/>
					<div class="imgInfo">
						<div class="day">
							<span>{{ day }}</span>
							<span class="suf">天</span>
						</div>
						<div class="tip">{{ tip }}</div>
						<div class="tag start">“</div>
						<div class="desc">{{ desc }}</div>
						<div class="tag end">”</div>
					</div>
				</div>
				<div class="b-footer">
					<div class="b-info">
						<div class="app-name">{{ appName }}</div>
						<div class="app-desc">{{ appDesc }}</div>
					</div>
					<img
						class="b-logo"
						crossOrigin="anonymous"
						:src="logo"
						style="object-fit: cover"
					/>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="f-h">- 分享到 -</div>
			<div class="f-b">
				<div
					class="f-item"
					@click="$emit('share', id, e.params)"
					v-for="(e, i) in shareList"
					:key="i"
				>
					<img
						class="f-img"
						crossOrigin="anonymous"
						:src="e.img"
						style="object-fit: cover"
					/>
					<span>{{ e.label }}</span>
				</div>
			</div>
			<div class="f-c" @click="$emit('cancel')">取消</div>
		</div>
	</div>
</template>

<script>
export default {
	emits: ["cancel", "share"],
	props: {
		id: {
			type: String,
			default: "ShareApp",
		},
		day: {
			type: String,
			default: "110",
		},
		tip: {
			type: String,
			default: "2023年专升本倒计时",
		},
		desc: {
			type: String,
			default:
				"满怀激情地投入到对事理的探究中来，至于建筑变成了自然而然的结果。",
		},
		appName: {
			type: String,
			default: "专升本宝典",
		},
		appDesc: {
			type: String,
			default: "让学习变得更简单",
		},
		logo: {
			type: String,
			default:
				"https://www.xiangshengben.com/api/uploads/1693669664785_logo.png",
		},
		bgImg: {
			type: String,
			default:
				"https://www.xiangshengben.com/api/uploads/1693668405459_share-bg.png",
		},
	},
	data() {
		return {
			shareList: [
				{
					params: {
						provider: "weixin",
						type: 2, //纯图片
						scene: "WXSceneSession",
						summary: "专升本宝典",
						// WXSceneSession 分享到聊天界面
						// WXSceneTimeline	分享到朋友圈
						// WXSceneFavorite	分享到微信收藏
					},
					img: "https://www.xiangshengben.com/api/uploads/1693668972573_share-wechat.png",
					label: "微信好友",
				},
				{
					params: {
						provider: "weixin",
						type: 2, //纯图片
						scene: "WXSceneTimeline",
						summary: "专升本宝典",
					},
					img: "https://www.xiangshengben.com/api/uploads/1693668989320_share-wechatCycle.png",
					label: "朋友圈",
				},
			],
		};
	},
};
</script>

<style lang="less" scoped>
img {
	vertical-align: middle;
}
.share-main {
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	.share-content {
		flex: 1;
		overflow-y: auto;
		padding: 20rem 0;
	}

	.shareBody {
		border-radius: 20rem;
		overflow: hidden;
		margin-top: 20px;
		width: 540rem;
		.img-c {
			position: relative;
			color: white;
			.imgInfo {
				position: absolute;
				top: 60rem;
				left: 42rem;
				right: 42rem;
				.day {
					font-size: 80rem;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					line-height: 1em;
					letter-spacing: 2px;
					span.suf {
						font-size: 36rem;
					}
				}
				.tip {
					font-size: 26rem;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 36rem;
					margin: -10rem 0 20rem;
				}
				.tag {
					font-size: 120rem;
					font-family: ArialHebrewScholar;
					color: #ffffff;
					line-height: 1em;
					&.start {
						margin-bottom: -40rem;
					}
					&.end {
						text-align: end;
					}
				}
				.desc {
					font-size: 22rem;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 32rem;
					margin: 5rem 30rem;
				}
			}
		}
		.b-footer {
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rem;
			.app-name {
				font-size: 34rem;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #303133;
				line-height: 48rem;
			}
			.app-desc {
				font-size: 26rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #919398;
				line-height: 36rem;
			}
			.b-logo {
				width: 120rem;
				height: 120rem;
			}
		}
		.b-img {
			width: 540rem;
			height: 600rem;
		}
	}
	.footer {
		width: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 20rem 20rem 0 0;
		.f-h {
			font-size: 26rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 36rem;
			padding: 20rem 0 15rem;
		}
		.f-b {
			display: flex;
			justify-content: center;
			.f-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 22rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rem;
				padding: 0 30rem;
				span {
					padding: 10rem 0 50rem;
				}
				.f-img {
					width: 100rem;
					height: 100rem;
				}
			}
		}
		.f-c {
			width: 100%;
			background: white;
			font-size: 36rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #303133;
			line-height: 50rem;
			padding: 30rem 0 40rem;
		}
	}
}
</style>

